<template>
    <view class="container">
        <swiper class="swiper" @change="swiperChange" :current="swiperCurrent">
            <template v-for="(item, index) in images_arr[current_type].images_arr"  >
                <swiper-item>
                    <view class="imgbox">
                        <image :lazy-load="true" :src="item" class="previewpic" mode="widthFix"></image>
                    </view>
                </swiper-item>
            </template>
        </swiper>
        <view class="targets">
            <view class="title">效果图 {{ swiperCurrent + 1 }}/{{ images_arr[current_type].images_arr.length }}</view>
            <scroll-view class="total" scroll-x>
                <view @tap="changeCurrentType" :data-index="index" :class="current_type == index ? 'active' : ''" v-for="(item, index) in images_arr"  >
                    {{ item.name }}({{ item.images_arr.length }})
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
const app = getApp();

const functions = require('../../../utils/functions.js');

export default {
    data() {
        return {
            images_arr: [],
            swiperCurrent: 0,
            current_type: 0,
        };
    },
    onShow: function () {
        var images_arr = app.globalData.pagesParamImagesArr;
        this.images_arr=images_arr
    },
	methods: {
        swiperChange: function (e) {
            this.swiperCurrent=e.detail.current
        },

		// previewImage(imgs) {
		// 	uni.previewImage({
		// 		current: imgs,
		// 		urls: [imgs],
		// 	});
		// },

        changeCurrentType: function (e) {
            var current_type = e.target.dataset.index;
            this.current_type=current_type;
            this.swiperCurrent=0
        }
    }
};
</script>
<style>
.container {
    height: 100vh;
    position: relative;
    background-color: #000;
}
.listbtn {
    color: #fff;
    font-size: 30rpx;
    width: 150rpx;
    height: 100rpx;
    line-height: 100rpx;
    position: absolute;
    right: 20rpx;
    top: 0rpx;
    z-index: 999;
    text-align: center;
}

.swiper {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.previewpic {
    width: 100%;
}

.imgbox {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
}
.targets {
    color: #fff;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
}

.total {
    padding: 30rpx 0;
    width: 100%;
    white-space: nowrap;
}
.total view {
    padding: 0 30rpx;
    height: 60rpx;
    line-height: 60rpx;
    display: inline-block;
    margin-right: 20rpx;
}
.total view:first-child {
    margin-left: 20rpx;
}
.total .active {
    border-radius: 50rpx;
    background-color: #fff;
    color: #999;
}
.title {
    padding-left: 20rpx;
}
</style>
